/*轮播图*/

// 封装一个圆
@mixin circle() {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.banner_box {
    position: relative;
    width: 100%;
    height: 530px;
    background: orange;
    top: 0;
    left: 0;
    /*轮播图的盒子*/
    .slide_box {
        height: 530px;
        overflow: hidden;
        position: relative;
        li {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        li:nth-of-type(1) {
            opacity: 1;
        }
    }
    /*轮播图的小圆点*/
    .slide_point {
        width: 170px;
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        z-index: 10px;
        position: absolute;
        bottom: 10px;
        left: 800px;
        opacity: 0.5;
        li {
            width: 14px;
            height: 14px;
            @include circle();
            overflow: hidden;
        }
        a {
            display: block;
            width: 10px;
            height: 10px;
            @include circle();
            border: 2px solid #000;
        }
    }
    /*小圆点选中时的样式*/
    .curr_point {
        background: #fff;
    }

    /*左右切换按钮*/
    .slide_move {
        width: 42px;
        height: 72px;
        background-image: url(https://p.ssl.qhimg.com/t01f23388c6d94b6dfb.png);
        background-repeat: no-repeat;
        background-color: rgba(59, 22, 22, 0.8);
        border-radius: 2px;
        position: absolute;
        top: 50%;
        margin-top: -36px;
        opacity: 0.6;
        z-index: 30;
    }
    .slide_move:hover {
        opacity: 1;
    }
    .slide_left {
        left: 50%;
        margin-left: -360px;
        background-position: -179px -143px;
    }
    .slide_right {
        right: 50%;
        margin-right: -590px;
        background-position: -177px -74px;
    }
}
